<template>
  <div class='order'>
    <!-- 输入框 -->
    <el-row :gutter="20">
      <el-col :span="4">
        <el-input v-model="SearchOrderVo.number" placeholder="请输入订单号"></el-input>
      </el-col>
      <el-col :span="4">
        <el-select v-model="SearchOrderVo.orderStatus" placeholder="请选择订单状态">
          <el-option v-for="item in orderType" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="4" style="text-align: left">
        <el-button type="primary" @click="searchOrderByConditions" icon="el-icon-search">查询</el-button>
      </el-col>
    </el-row>
    <!-- 表格 -->
    <el-table :data="OrderList" stripe style="width: 100%" height="550" border v-loading="loading">
      <el-table-column type="index" width="50" align="center" label="序号">
      </el-table-column>
      <el-table-column prop="number" label="订单号" width="200" align="center">
      </el-table-column>
      <el-table-column prop="orderStatus" label="订单状态" width="100" align="center">
      </el-table-column>
      <el-table-column prop="createUser" label="下单人" width="100" align="center">
      </el-table-column>
      <el-table-column prop="address" label="配送地址" width="200" align="center">
      </el-table-column>
      <el-table-column prop="createDate" label="下单时间" width="180" align="center">
      </el-table-column>
      <el-table-column prop="totalMoney" label="实收金额" width="100" align="center">
      </el-table-column>
      <el-table-column prop="createUser" label="创建人" width="100" align="center">
      </el-table-column>
      <el-table-column prop="createDate" label="创建时间" width="180" align="center">
      </el-table-column>
      <el-table-column prop="updateUser" label="修改人" width="100" align="center">
      </el-table-column>
      <el-table-column prop="updateDate" label="修改时间" width="180" align="center">
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="240" align="center">
        <template slot-scope="scope">
          <el-button @click="checkOrder(scope.row.id)" type="text" size="mini" style="color: #67c23a"><i
              class="el-icon-view"></i>&nbsp;订单明细</el-button>
          <el-button type="text" @click="editOrderStatus(scope.row.id)" size="mini" style="color: #409eff"><i
              class="el-icon-edit"></i>&nbsp;修改订单状态</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页条 -->
    <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
      :page-sizes="[15, 20, 30, 40]" layout="total, sizes, prev, pager, next, jumper" :total="dataSize" align="center">
    </el-pagination>
    <!-- 修改订单状态 -->
    <el-dialog title="修改订单状态" :visible.sync="editOrderVisible" width="32%">
      <el-form ref="form" :model="editOrder" label-width="80px" label-position="left" style="margin: 20px 40px;">
        <el-form-item label="订单状态:">
          <el-select v-model="editOrder.orderStatus" placeholder="请选择订单状态">
            <el-option v-for="item in orderType" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <div style="margin-top: 40px"></div>
        <el-form-item>
          <el-button type="primary" @click="editStatus">保存</el-button>
          <el-button style="margin-left: 80px;" @click="editOrderVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog title="订单详情" :visible.sync="viewOrderVisible">
      <el-descriptions column="1" border>
        <el-descriptions-item label="已选菜品">{{ goodStr }}</el-descriptions-item>
        <el-descriptions-item label="订单号">{{ order.number }}</el-descriptions-item>
        <el-descriptions-item label="下单人">{{ order.createUser }}</el-descriptions-item>
        <el-descriptions-item label="订单状态">{{ order.orderStatus }}</el-descriptions-item>
        <el-descriptions-item label="配送方式" v-if="order.address !== '到店用餐'">外送到家</el-descriptions-item>
        <el-descriptions-item label="配送方式" v-else>到店用餐</el-descriptions-item>
        <el-descriptions-item label="配送地址" v-if="order.address !== '到店用餐'">{{ order.address }}</el-descriptions-item>
        <el-descriptions-item label="实收金额">{{ order.totalMoney }}</el-descriptions-item>
        <el-descriptions-item label="下单时间">{{ order.createDate }}</el-descriptions-item>
        <el-descriptions-item label="买家留言">{{ order.UserText }}</el-descriptions-item>
        <el-descriptions-item label="创建人">{{ order.createUser }}</el-descriptions-item>
        <el-descriptions-item label="修改人">{{ order.updateUser }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ order.createDate }}</el-descriptions-item>
        <el-descriptions-item label="修改时间">{{ order.updateDate }}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import request from '@/utils/request'

export default {
  name: 'OrderIndex',
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data () {
  // 这里存放数据
    return {
      loading: true,
      baseOrder: '/order-basic',
      pageIndex: 1,
      pageSize: 15,
      dataSize: 0,
      SearchOrderVo: {
        number: '',
        orderStatus: ''
      },
      orderType: [
        {
          value: 1,
          label: '已支付'
        },
        {
          value: 2,
          label: '已发货'
        },
        {
          value: 3,
          label: '已完成'
        }
      ],
      OrderList: [
      ],
      OrderDetailList: [],
      editOrderVisible: false,
      editOrder: {
        id: 0,
        orderStatus: ''
      },
      viewOrderVisible: false,
      order: {},
      goodStr: ''
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {
  },
  // 方法集合
  methods: {
    async searchOrderByConditions () {
      this.SearchOrderVo.orderStatus = this.SearchOrderVo.orderStatus === '' ? 0 : this.SearchOrderVo.orderStatus
      await request({
        url: this.baseOrder + `/order-list/${this.pageIndex}/${this.pageSize}`,
        method: 'get',
        params: this.SearchOrderVo
      }).then(res => {
        if (res.data.data.data !== null) {
          this.dataSize = res.data.data.size
          this.OrderDetailList = res.data.data.data
          this.loading = false
          this.transformOrderToDetail()
          this.SearchOrderVo = {
            number: '',
            orderStatus: ''
          }
        }
      })
    },
    transformOrderToDetail () {
      const xx = []
      this.OrderDetailList.forEach(item => {
        const orderDetail = {
          id: 0,
          number: '',
          orderStatus: '',
          username: '',
          phone: '',
          address: '',
          totalMoney: 0,
          createUser: '',
          createDate: new Date(),
          updateUser: '',
          updateDate: new Date(),
          orderDetail: [],
          UserText: ''
        }
        orderDetail.id = item.id
        orderDetail.number = item.number
        orderDetail.username = item.addressBook.name !== null ? item.addressBook.name : item.createUser
        orderDetail.phone = item.addressBook.phone
        orderDetail.address = item.addressBook.name !== null ? item.addressBook.name + ' ' + item.addressBook.phone + ' ' + item.addressBook.provinceName + ' ' + item.addressBook.cityName + item.addressBook.districtName + ' ' + item.addressBook.detail : '到店用餐'
        orderDetail.totalMoney = item.totalMoney
        orderDetail.createUser = item.createUser
        orderDetail.createDate = item.createDate
        orderDetail.updateUser = item.updateUser
        orderDetail.updateDate = item.updateDate
        orderDetail.orderDetail = JSON.parse(item.orderDetail)
        orderDetail.orderStatus = this.changeStatusTostring(item.orderStatus)
        orderDetail.UserText = item.UserText
        xx.push(orderDetail)
      })
      this.OrderList = xx
    },
    handleSizeChange (val) {
      this.pageSize = val
      this.loading = true
      this.searchOrderByConditions()
    },
    handleCurrentChange (val) {
      this.pageIndex = val
      this.loading = true
      this.searchOrderByConditions()
    },
    // 查看订单明细
    checkOrder (id) {
      let goods = ''
      this.OrderList.forEach(item => {
        if (item.id === id) {
          this.viewOrderVisible = true
          this.order = item
          this.order.orderDetail.forEach(good => {
            if (good.item.dishBasicDto !== null) {
              if (good.item.flavorString !== '') {
                goods += good.item.dishBasicDto.dishName + '(' + good.item.flavorString + ')x' + good.item.num + '+'
              } else {
                goods += good.item.dishBasicDto.dishName + 'x' + good.item.num + '+'
              }
            }
            if (good.item.setmealBasicDto !== null) {
              goods += good.item.setmealBasicDto.setmealName + 'x' + good.item.num + '+'
            }
          })
        }
      })
      goods = goods.slice(0, -1)
      this.goodStr = goods
    },
    // 修改订单状态
    editOrderStatus (id) {
      this.editOrderVisible = true
      this.editOrder.id = id
    },
    changeStatusTostring (order) {
      let label = ''
      this.orderType.forEach(item => {
        if (item.value === order) {
          label = item.label
        }
      })
      return label
    },
    editStatus () {
      request({
        url: this.baseOrder + '/order-basic',
        method: 'put',
        data: this.editOrder
      }).then(res => {
        if (res.data.data) {
          this.searchOrderByConditions()
          this.editOrderVisible = false
          this.editOrder = {
            id: 0,
            orderStatus: ''
          }
        }
      })
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {
    this.searchOrderByConditions()
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {

  },
  beforeCreate () {}, // 生命周期 - 创建之前
  beforeMount () {}, // 生命周期 - 挂载之前
  beforeUpdate () {}, // 生命周期 - 更新之前
  updated () {}, // 生命周期 - 更新之后
  beforeDestroy () {}, // 生命周期 - 销毁之前
  destroyed () {}, // 生命周期 - 销毁完成
  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="less" scoped>
.order {
    background-color: #fff;
    height: 690px;
    padding: 20px 20px;
    border-radius: 30px;
  }
  .el-table {
    margin-top: 20px;
  }

  .el-pagination {
    margin-top: 20px;
  }
</style>
